<template>
  <div class="comp" ref="crosswise"><!-- 放置图表的位置 --></div>
</template>
  
<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue";
const echarts = inject("echarts");
const api = inject("api");

// 2.初始化页面数据
let crosswise = ref(null); //初始化图表容器ref值
let echartsInstance = null; //初始化echarts实例对象
let allData = []; //初始化业务数据

// 3.获取echarts绘图实例 设置基础配置项 完成基础图表绘制
function initEcharts() {
  // 3.1获取实例
  echartsInstance = echarts.init(crosswise.value, "dark");
  // 3.2设置基础配置项
  let initOptions = {
    title: {
      text: "▍全国地区种植收成情况",
      top: "3%",
      left: "3%",
    },
    grid: {
      show: false,
      top: "12%",
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "category",
      //   data: allData.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      //   data: allData.map((item) => item.harvest),
    },
    series: [
      {
        type: "line",
        label: {
          show: true,
          //   position: "",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 1,
                color: "orangered", // 0% 处的颜色
              },
              {
                offset: 0,
                color: "orange", // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
  // 3.3完成基础图表绘制
  echartsInstance.setOption(initOptions);
}

// 4.获农业种植面积数据
async function getData() {
  let { data } = await api("CropGrowthTrend");
  allData = data.map((item, index) => item.content);
  // console.log(allData);

  editEcharts();
}

// 5.根据业务继续完善绘图配置项 完善图表
function editEcharts() {
  let seriesData = allData.map((item, index) => {
    return {
      type: "line",
      data: item.map(o => o.area),
      // center: [100 / (count + 1) * (index + 1) + '%', '50%'],
      // label: {
      //   position: "center"
      // }
    }
  })
  // 5.1设置绘图配置项
  let editOptions = {
    xAxis: {
      data: allData[0].map(item => item.month)
    },
    series: seriesData
  };
  // 5.2使用配置项完善图表 合拼新旧配置项
  echartsInstance.setOption(editOptions);
}

// 6.图表适配方法 坐标系内的  坐标系外的（自己处理）
function Adaptation() {
  // ------------------手动处理适配-------------------
  // 获取自定义比例尺  获取当前图表容器的宽度/100*3.5-3.7(3.6)
  let width = crosswise.value.offsetWidth;
  let scale = (width / 100) * 3.6;

  // 6.1设置基础配置项
  let initOptions = {
    title: {
      textStyle: {
        fontSize: scale,
      },
    },
    series: [
      {
        barWidth: scale,
        itemStyle: {
          borderRadius: [scale / 2, scale / 2, 0, 0],
        },
      },
    ],
  };
  // 6.2完成基础图表绘制
  echartsInstance.setOption(initOptions);
  // -----------------坐标系内适配----------------------
  // 6.3
  echartsInstance.resize();
}

// 组件挂载完毕执行业务逻辑
onMounted(() => {
  initEcharts();
  getData();
  window.addEventListener("resize", Adaptation); //开启窗口变化监听
  Adaptation();
});

// 组件销毁移除  防止内存泄露
onBeforeUnmount(() => {
  window.removeEventListener("resize", Adaptation);
});
</script>
  
<style scoped></style>